<template>
  <div>
    <div class="main2-header">
      <div class="main2-logo">
        <img src="../assets/logo.png" alt="">
        <span class="main2-title">
        <span style="font-family: 'STXingkai'">智&nbsp;慧&nbsp;眼&nbsp;疾&nbsp;筛&nbsp;查&nbsp;系&nbsp;统</span>
        <span>ZHI HUI YAN JI SHAI CHA XI TONG</span>
      </span>
      </div>
      <div class="main2-menu">
        <div class="main2-login" v-if="!username"><span><em @click="loginRegister(1)">登录</em>|<em
          @click="loginRegister(2)">注册</em></span></div>
        <div class="main2-login" v-if="username"><span><em>{{username}}</em>|<em
          @click="logoutModal=true">{{register}}</em></span></div>
        <!--<div class="main2-menu-item">-->
        <!--<span>主页</span><span @click="go">信息录入</span><span>查看历史</span><span>清空列表</span>-->
        <!--</div>-->
        <div style="position: relative;z-index: 1;">
          <Menu mode="horizontal" active-name="1" @on-select="selectItem">
            <MenuItem name="1" to="/login2" :class="selectedMenu==1?'main2-selected-menuitem':''">
              主页
            </MenuItem>
            <MenuItem name="2" to="/screening2" :class="selectedMenu==2?'main2-selected-menuitem':''">
              信息录入
            </MenuItem>
            <MenuItem name="3" to="/result2" :class="selectedMenu==3?'main2-selected-menuitem':''">
              查看历史
            </MenuItem>
            <MenuItem name="4" :class="selectedMenu==4?'main2-selected-menuitem':''">
              清除列表
            </MenuItem>
            <!--<MenuItem name="5" to="/admin" :class="selectedMenu==5?'main2-selected-menuitem':''" style="width: 150px">-->
            <MenuItem name="5" :class="selectedMenu==5?'main2-selected-menuitem':''" style="width: 150px">
              <!--管理后台-->
              数据库下载
            </MenuItem>
          </Menu>
        </div>
        <!--<div style="height: 25px;background-color: rgba(152,152,152,0.1);margin-top: -25px;z-index: 99;position: relative;"></div>-->
      </div>
    </div>
    <div class="main2-line"></div>
    <Modal width="20" v-model="logoutModal" @on-ok="logout">
      <p style="font-size: 20px;margin: 20px 0;">确定退出登录？</p>
    </Modal>
    <Modal width="20" v-model="clearModal" @on-ok="clear">
      <p style="font-size: 20px;margin: 20px 0;">确定删除列表中已筛查完成项？</p>
    </Modal>
    <keep-alive include="screening2">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
  import event from '../components/event';

  export default {
    name: "main2",
    data() {
      return {
        selectedMenu: 1,
        username: '',
        register: '',
        logoutModal: false,
        clearModal: false
      }
    },
    methods: {
      // go() {
      //     this.$router.push('/main2/screening2')
      // },
      loginRegister(num) {
        event.$emit('loginRegister', num);
      },
      clear() {
        console.log('clearScreening')
        event.$emit('clearScreening')
      },
      selectItem(name) {
        var login = window.localStorage.getItem('screeningLogin');
        if(!login){
          this.$Message.info({content:'请先登录'});
          return
        }else{
          this.selectedMenu = name;
        }
        if (name == 4) {
          this.clearModal = true;
          this.selectedMenu = 2;
          this.$router.push('/screening2');
        }
        if (name ==5 ){
          this.selectedMenu = 2;
          this.$router.push('/screening2');
          window.open('http://www.hunan-machine-vision.com/pages/octseg-csu.jsp');
        }
      },
      logout() {
        window.localStorage.removeItem('screeningLogin');
        window.localStorage.removeItem('user');
        this.username = '';
        // this.register = '注册';
        this.$router.push('/login2');
        this.selectedMenu = 1;
        event.$emit('logout');
      }
    },
    created() {
      // console.log(this.$route.name)
      switch (this.$route.name) {
        case 'main2':
          this.selectedMenu = 1;
          break;
        case 'screening2':
          this.selectedMenu = 2;
          break;
        case 'result2':
          this.selectedMenu = 3;
          break;
        case 'admin':
          this.selectedMenu = 5;
          break;
        case 'login2':
          if (window.localStorage.getItem('screeningLogin')) {
            this.selectedMenu = 2;
            this.$router.push('/screening2');
          }
      }
    },
    mounted() {
      if (window.localStorage.getItem('user')) {
        this.username = window.localStorage.getItem('user');
        this.register = '退出';
      }
      event.$on('loginSuccess', () => {
        console.log('loginSuccess');
        this.selectedMenu = 2;
        this.username = window.localStorage.getItem('user');
        this.register = '退出';
      })
    }
  }
</script>

<style scoped lang="scss">
  .main2-header {
    height: 110px;
    /*margin-left: 45px;*/
    display: flex;
    justify-content: space-between;
    position: fixed;
    width: 100%;
    padding-left: 45px;
    background-color: white;
    z-index: 99;
    .main2-logo {
      padding-top: 25px;
      display: flex;
      align-items: center;
      img {
        width: 80px;
      }
      .main2-title {
        display: inline-block;
        margin-left: 10px;
        text-align: center;
        span {
          display: block;
          &:first-child {
            font-size: 30px;
          }
          &:last-child {
            font-size: 16px;
            font-family: 'Microsoft YaHei';
          }
        }
      }
    }
    .main2-menu {
      padding-top: 25px;
      font-family: 'Microsoft YaHei';
      .ivu-menu-horizontal {
        height: 50px;
        line-height: 50px;
        li, a {
          width: 120px;
          text-align: center;
          background-color: rgb(169, 72, 102);
          font-size: 20px;
          color: rgb(255, 255, 255);
          border: none;
        }
        .main2-selected-menuitem {
          background-color: rgb(206, 206, 206);
          color: rgb(0, 0, 0);
          height: 60px;
          border-bottom-left-radius: 5px;
          border-bottom-right-radius: 5px;
          box-shadow: 3px 3px 2px rgba(206, 206, 206, 0.5);
        }
        a:nth-child(-n+3):after {
          content: '';
          width: 1px;
          height: 40px;
          background-color: rgb(190, 116, 138);
          position: absolute;
          right: 0;
          top: 5px;
        }
        .main2-selected-menuitem:after {
          content: '';
          width: 0 !important;
          height: 40px;
          background-color: rgb(190, 116, 138);
          position: absolute;
          right: 0;
          top: 5px;
        }
      }
      .main2-menu-item {
        span {
          position: relative;
          display: inline-block;
          width: 120px;
          height: 50px;
          line-height: 50px;
          text-align: center;
          background-color: rgb(169, 72, 102);
          font-size: 20px;
          color: rgb(255, 255, 255);
        }
        span:nth-child(-n+3):after {
          content: '';
          width: 1px;
          height: 40px;
          background-color: rgb(190, 116, 138);
          position: absolute;
          right: 0;
          top: 5px;
        }
      }
      .main2-login {
        text-align: right;
        span {
          display: inline-block;
          /*width: 95px;*/
          height: 35px;
          line-height: 35px;
          text-align: center;
          background-color: rgb(83, 83, 83);
          color: rgb(255, 255, 255);
          border-top-left-radius: 20px;
          border-top-right-radius: 20px;
          padding: 0 20px;
          font-size: 16px;
          em {
            font-style: normal;
            padding: 0 5px;
          }
          em:hover {
            text-decoration: underline;
            cursor: pointer;
          }
        }
      }
    }
  }

  .main2-line {
    background-color: rgb(249, 247, 247);
    height: 15px;
    position: fixed;
    width: 100%;
    top: 110px;
  }
</style>
